import React, {useState, useEffect} from 'react'
import { connect } from 'react-redux'
import { getcitieslist } from '../Events/store/actionCreators'
import { CityWrapper } from './style'
import { Link } from 'react-router-dom'
 function Cities(props) {
    const { getCitiesDataDispatch} = props
    useEffect(() => {
        getCitiesDataDispatch();
    },[])
    const renderCities = () => {
        console.log(props,'///')
        return props.citieslist.map(({id, nm}) => {
            return <Link
                className="city_name"
                to={{
                    pathname: '/events',
                    search: `name=${nm}`
                }}
                key={id}>
                {nm}
            </Link>
        })
    }
    return (
        <CityWrapper>
        {renderCities()}
        </CityWrapper>
    )
}
const mapStateToProps = (state) => {
    return {
        citieslist:state.Events.citieslist
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        getCitiesDataDispatch() {
          dispatch(getcitieslist())
        },
      }
}
export default connect(mapStateToProps, mapDispatchToProps)(Cities)
